import React, { Component } from "react";
import "../assets/css/Cart.css";
import Top from "../component/Top.jsx";
import { cartlist } from "../utils/api";

export default class Cart extends Component {
    constructor() {
        super();
        this.state = {
            title: "购物车",
            // goods: {
            //     title: '自营商品',
            //     list:[]
            // },
            // group: {
            //     title: '万人团购',
            //     list:[],
            // }
            list:[]
        };
    }
    async componentDidMount() {
        let res = await cartlist(this.uid)
        this.setState({
            ...this.state,
            list:res.list,
        })
    }
    render() {
        let { list } = this.state;
        console.log(list);
        console.log(list[0]);
        return (
            <div id="cart">
                <Top title={this.state.title}></Top>
                <main>
                    <nav>
                        <ul className="nav-sort">
                            <li className="fontSize">
                                <a href="#">全部</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">降价</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">常卖</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">
                                    分类
                                    <i className="iconfont icon-shangxiajiantouheise font28"></i>
                                </a>
                                <span></span>
                            </li>
                        </ul>
                    </nav>
                    <article className="content">

                        {
                            this.state.list.map((item,index) =>
                                <div key={index}>
                                    <section className="flex">
                                        <div className="conNav-left">
                                            <input type="checkbox" id={"store"+index} />
                                            <label for={"store"+index} className="font32">
                                                {/* 没店铺名称,自己写的 */}
                                                <span>{index == 0 ? '精选商品' : '万人团购'}</span>
                                            </label>
                                        </div>
                                        <div className="conNav-right">
                                            <span className="font24">已免运费</span>
                                            <span className="font24">领券</span>
                                        </div>
                                    </section>
                                    {/* <!-- 店铺内商品 --> */}
                                    {/* 
                                        goodsid: 12
                                        goodsname: "大西红柿 400g/份"
                                        id: 18
                                        img: "/uploads/tomato.jpg"
                                        num: 1
                                        price: 1.88
                                        status: 1
                                        type: 1                                   
                                    */}
                                    {
                                        item.content.map(item =>
                                            <section key={item.goodsid}>
                                                <ul className="flex">
                                                    <li className="conNav-left">
                                                        <input
                                                            type="checkbox"
                                                            name={"store"+index}
                                                            id={"com"+item.id}
                                                        />
                                                        <label
                                                            for={"com"+item.id}
                                                            className="font32"
                                                        ></label>
                                                    </li>
                                                    <li>
                                                        <img src={this.url + item.img} alt="商品" />
                                                    </li>
                                                    <li className="introduce">
                                                        <div>
                                                            <h4 className="font32">
                                                                {item.goodsname}
                                                            </h4>
                                                            <p className="font28 comIntroduce">
                                                                深层清洁肌肤，温和又滋润，日...
                                                            </p>
                                                        </div>
                                                        {/* <div className="commodityBot">
                                                            <select className="font20">
                                                                <option value="粉色 50ML">
                                                                    粉色 50ML
                                                                </option>
                                                            </select>
                                                            <p className="font20 ">
                                                                比加入时降低￥100
                                                            </p>
                                                        </div> */}
                                                        <div className="flex">
                                                            <p className="money">
                                                                <b className="font20">￥</b>
                                                                <span>{item.price}</span>
                                                            </p>
                                                            <div className="comNum flex">
                                                                <button className="font28">
                                                                    一
                                                                </button>
                                                                <div className="number font28">
                                                                    {item.num}
                                                                </div>
                                                                <button className="font28">
                                                                    十
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </section>
                                        )
                                    }
                                </div>
                            )
                        }
                    </article>
                </main>
                <div class="payfor flex">
                    <div class="conNav-left">
                        <input type="checkbox" name="all" id="all" />
                        <label for="all" class="font32">
                            <span>全选</span>
                        </label>
                    </div>
                    <p class="flexC">
                        <strong class="font32">合计</strong>
                        <span class="font20">已免运费</span>
                    </p>
                    <p class="money flexC">
                        <span>￥1998</span>
                        <span class="font20">已优惠￥200元</span>
                    </p>
                    <input type="submit" value="结算" class="font32" />
                </div>
                {/* <van-submit-bar v-model="checked" className="shopBot" :price="price1" button-text="提交订单">
                <van-checkbox v-model="checked" @click="checkAll">全选</van-checkbox>
            </van-submit-bar> */}
            </div>
        );
    }
}
